<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import MaterialButton from "@/components/MaterialButton.vue";
import ScrollReveal from "scrollreveal";

//example components
import NavbarDefault from "../../examples/navbars/NavbarDefault.vue";
import DefaultFooter from "../../examples/footers/FooterDefault.vue";
import Header from "../../examples/Header.vue";
import Map from "./Components/Map.vue";
import Tires from "./Components/Tires.vue";
//images
import vueMkHeader from "@/assets/img/home/bg.png";

import bg1 from "@/assets/img/home/banner/img1/bg.jpg";
import bgb1 from "@/assets/img/home/banner/img1/bgb.png";
import jeep1 from "@/assets/img/home/banner/img1/jeep.png";
import tire1 from "@/assets/img/home/banner/img1/tire.png";
import title1 from "@/assets/img/home/banner/img1/title.png";

import bg2 from "@/assets/img/home/banner/img2/bg.jpg";
import bgb2 from "@/assets/img/home/banner/img2/bgb.png";
import car2 from "@/assets/img/home/banner/img2/car.png";
import tire2 from "@/assets/img/home/banner/img2/tire.png";
import title2 from "@/assets/img/home/banner/img2/title.png";

import bg3 from "@/assets/img/home/banner/img3/bg.jpg";
import bgb3 from "@/assets/img/home/banner/img3/bgb.png";
import car3 from "@/assets/img/home/banner/img3/car.png";
import tire3 from "@/assets/img/home/banner/img3/tire.png";
import title3 from "@/assets/img/home/banner/img3/title.png";

import bg4 from "@/assets/img/home/banner/img4/bg.jpg";
import bgb4 from "@/assets/img/home/banner/img4/bgb.png";
import car4 from "@/assets/img/home/banner/img4/car.png";
import tire4 from "@/assets/img/home/banner/img4/tire.png";
import title4 from "@/assets/img/home/banner/img4/title.png";

import aboutBg from "@/assets/img/home/about/bg.jpg";
import title5 from "@/assets/img/home/about/title.png";

//hooks
import { getIndexBanner, listUs } from "@/api/tires";

import VideoPlayer from "./Components/VideoPlayer.vue";
let url = ref("");
let isImg = ref(true);
let aboutList = ref([]);
listUs().then((res) => {
  aboutList.value = res.data.records;
});
// getIndexBanner().then((res) => {
//     url.value = res.data[0]?.materialList[0].fileUrl || "";
//     if (url.value.indexOf(".png") > -1 || url.value.indexOf(".jpg") > -1) {
//         isImg.value = true;
//     } else if (url.value.indexOf(".mp4") > -1) {
//         isImg.value = false;
//     } else {
//         isImg.value = true;
//     }
// });
onMounted(() => {
  const sr = ScrollReveal({ reset: false });
  sr.reveal(".scroll-reveal-item", {
    duration: 600,
    delay: 300,
    opacity: 0,
    easing: "linear",
  });
  sr.reveal(".scroll-reveal-item2", {
    duration: 1000,
    delay: 600,
    opacity: 0,
    easing: "linear",
  });
  sr.reveal(".scroll-reveal-item3", {
    duration: 1000,
    delay: 600,
    opacity: 0,
    easing: "linear",
  });
  sr.reveal(".scroll-reveal-item4", {
    duration: 1000,
    delay: 600,
    opacity: 0,
    easing: "linear",
  });
  sr.reveal(".scroll-reveal-item5", {
    duration: 1000,
    delay: 600,
    opacity: 0,
    easing: "linear",
  });
});
onUnmounted(() => {});
</script>

<template>
  <div class="position-fixed z-index-sticky top-0 w-100">
    <NavbarDefault transparent />
  </div>
  <!-- <Header>
        <div v-if="isImg" class="page-header min-vh-100" :style="`background-image: url(${url ? url : vueMkHeader});background-position:bottom;`" loading="lazy">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center mx-auto position-relative text-white">
                        <div class="display-1" :style="{ fontWeight: '800' }">PREMIUM QUALITY</div>
                        <button class="s-btn-1 mt-5" @click="$router.push('/products')">FIND WHAT FITS YOU</button>
                    </div>
                </div>
            </div>
        </div>
        <div v-else style="width: 100%">
            <VideoPlayer :url="url" />
        </div>
    </Header> -->

  <div class="box-bg scroll-reveal-container">
    <div
      class="scroll-reveal-item bg"
      :style="`background-image: url(${bg1});background-position:bottom;position:relative;`"
      loading="lazy"
    >
      <div class="row py-6 mx-4">
        <img :src="title1" alt="" class="img-fluid" />
      </div>
      <img class="car car1" data-aos="fade-right" :src="jeep1" alt="" />
      <img
        class="tire tire1"
        data-aos="fade-up"
        data-aos-easing="linear"
        :src="tire1"
        alt=""
      />
      <img class="bgb bgb1" :src="bgb1" alt="" />

      <div
        class="info info1"
        style="text-align: right"
        data-aos="fade-up"
        data-aos-delay="600"
      >
        <div class="home-title uppercase">
          <span class="ignore">BADLANDS </span> <br />TIRES
        </div>
        <MaterialButton class="bg-red" @click="$router.push('/products')"
          >LEARN MORE</MaterialButton
        >
      </div>
    </div>
  </div>

  <div class="box-bg scroll-reveal-container">
    <div
      class="scroll-reveal-item2 bg"
      :style="`background-image: url(${bg2});background-position:bottom;position:relative;`"
      loading="lazy"
    >
      <div class="row py-6 mx-4">
        <img :src="title2" alt="" class="img-fluid" />
      </div>
      <img class="car car2" data-aos="fade-left" :src="car2" alt="" />
      <img
        class="tire tire2"
        data-aos="fade-up"
        data-aos-easing="linear"
        :src="tire2"
        alt=""
      />
      <img class="bgb bgb2" :src="bgb2" alt="" />
      <div class="info info2" data-aos="fade-up" data-aos-delay="600">
        <div class="home-title uppercase">M-TRAC <br />TIRES</div>
        <MaterialButton class="bg-red" @click="$router.push('/products')"
          >LEARN MORE</MaterialButton
        >
      </div>
    </div>
  </div>

  <div class="box-bg scroll-reveal-container">
    <div
      class="scroll-reveal-item3 bg"
      :style="`background-image: url(${bg3});background-position:bottom;position:relative;`"
      loading="lazy"
    >
      <div class="row py-6 mx-4">
        <img :src="title3" alt="" class="img-fluid" />
      </div>
      <img class="car car3" data-aos="fade-right" :src="car3" alt="" />
      <img
        class="tire tire3"
        data-aos="fade-up"
        data-aos-easing="linear"
        :src="tire3"
        alt=""
      />
      <img class="bgb bgb3" :src="bgb3" alt="" />

      <div
        class="info info3"
        style="text-align: right"
        data-aos="fade-up"
        data-aos-delay="300"
      >
        <div class="home-title uppercase">
          SPECIALTY<br />
          TRAILER TIRES
        </div>
        <MaterialButton
          class="bg-red"
          @click="$router.push('/products?posId=3')"
          >LEARN MORE</MaterialButton
        >
      </div>
    </div>
  </div>

  <div class="box-bg scroll-reveal-container">
    <div
      class="scroll-reveal-item4 bg"
      :style="`background-image: url(${bg4});background-position:bottom;position:relative;`"
      loading="lazy"
    >
      <div class="row py-6 mx-4">
        <img :src="title4" alt="" class="img-fluid" />
      </div>
      <img class="car car4" data-aos="fade-left" :src="car4" alt="" />
      <img
        class="tire tire4"
        data-aos="fade-up"
        data-aos-easing="linear"
        :src="tire4"
        alt=""
      />
      <img class="bgb bgb4" :src="bgb4" alt="" />
      <div class="info info4" data-aos="fade-up" data-aos-delay="600">
        <div class="home-title uppercase">COMMERCIAL<br />TRUCK TIRES</div>
        <MaterialButton
          class="bg-red"
          @click="$router.push('/products?posId=2')"
          >LEARN MORE</MaterialButton
        >
      </div>
    </div>
  </div>
  <div class="scroll-reveal-container" style="background: #e9e9e9">
    <div
      class="page-header min-vh-100 scroll-reveal-item5 about-bg"
      :style="`background-image: url(${aboutBg});`"
      loading="lazy"
    >
      <img
        :src="title5"
        alt=""
        class="my-6 mx-4"
        style="position: absolute; top: 0; width: calc(100% - 3rem)"
      />
      <div class="about-box" data-aos="fade-up">
        <div class="border-text uppercase">
          {{ aboutList[0]?.title ? aboutList[0].title : "ABOUT US" }}
        </div>
        <div
          v-if="aboutList[0]?.content"
          v-html="aboutList[0].content"
          class="mt-3 text-f-Montserrat-Regular text-black mb-9"
        ></div>
        <p v-else class="mt-3 text-f-Montserrat-Regular text-black mb-9">
          Mastertrack, a distinguished product of Unicorn Tire Corporation,
          offers a comprehensive selection of passenger, light truck specialty
          trailer, commercial truck, bus, and radial tires, Meticulously
          designed, engineered, manufactured, and rigorously tested
          atworld-renowned facilities, Mastertrack consistently delivers the
          performance and quality you can trust. Conveniently, our
          threestrategically placed warehouses in Memphis, Houston, and Las
          Vegas ensure prompt access to our exceptional tire solutions
        </p>
      </div>
    </div>
  </div>

  <Tires style="background: #fff" />
  <!-- <Map /> -->
  <DefaultFooter />
</template>
<style scoped>
.box-bg {
  background: rgba(233, 233, 233, 1);
}
.tire,
.car,
.info,
.bgb {
  position: absolute;
}
.bg {
  height: 960px;
}

@media (max-width: 991.98px) {
  .bg {
    height: 760px;
  }
  .home-title,
  .border-text {
    line-height: 2.4rem;
  }
  .border-text {
    margin-top: 6rem;
  }
  .about-bg {
    background-position: 20% bottom;
    background-repeat: no-repeat;
    /* background-size: auto 65%; */
  }
}
@media (min-width: 0px) {
  .about-box {
    padding: 0 2rem;
    width: 100%;
  }
  .home-title,
  .border-text {
    font-size: 2.2rem;
  }
  .car1 {
    max-width: 80% !important;
    bottom: 100px;
    left: -5%;
    z-index: 2;
  }
  .tire1 {
    max-width: 90% !important;
    bottom: 240px;
    right: 0;
  }
  .info1 {
    bottom: 480px;
    right: 2rem;
    z-index: 2;
  }
  .bgb1 {
    width: 100%;
    height: 170px;
    left: 0;
    bottom: 125px;
    z-index: 1;
  }

  .car2 {
    max-width: 90% !important;
    right: -10%;
    bottom: 120px;
    z-index: 2;
  }
  .tire2 {
    max-width: 100% !important;
    left: -10%;
    bottom: 200px;
  }
  .info2 {
    padding-left: 2rem;
    bottom: 485px;
    z-index: 2;
  }
  .bgb2 {
    width: 100%;
    height: 760px;
    left: 0;
    bottom: 0;
    z-index: 1;
  }

  .car3 {
    max-width: 85% !important;
    bottom: 100px;
    left: -5%;
    z-index: 2;
  }
  .tire3 {
    max-width: 85% !important;
    bottom: 200px;
    right: -10%;
  }
  .info3 {
    bottom: 450px;
    right: 2rem;
    z-index: 2;
  }
  .bgb3 {
    width: 100%;
    height: 760px;
    left: 0;
    bottom: 0;
    z-index: 1;
  }

  .car4 {
    max-width: 90% !important;
    right: -5%;
    bottom: 80px;
    z-index: 2;
  }
  .tire4 {
    max-width: 90% !important;
    left: 0;
    bottom: 150px;
  }
  .info4 {
    padding-left: 2rem;
    bottom: 420px;
    z-index: 2;
  }
  .bgb4 {
    width: 100%;
    height: 760px;
    left: 0;
    bottom: 0;
    z-index: 1;
  }
}
@media (min-width: 991.98px) {
  .about-box {
    padding: 0 6rem;
    width: 50%;
  }
  .home-title,
  .border-text {
    font-size: 4rem;
    line-height: 6rem;
  }
  .car1 {
    max-width: 650px !important;
    bottom: 60px;
    left: 0;
    z-index: 2;
  }
  .tire1 {
    max-width: 750px !important;
    bottom: 230px;
    right: 0;
  }
  .info1 {
    bottom: 120px;
    right: 6rem;
    z-index: 2;
  }
  .bgb1 {
    width: 100%;
    height: 312px;
    left: 0;
    bottom: 0;
    z-index: 1;
  }

  .car2 {
    max-width: 650px !important;
    right: 0px;
    bottom: 40px;
    z-index: 2;
  }
  .tire2 {
    max-width: 550px !important;
    left: 0;
    bottom: 200px;
  }
  .info2 {
    padding-left: 100px;
    bottom: 55px;
    z-index: 2;
  }
  .bgb2 {
    width: 100%;
    height: 960px;
    left: 0;
    bottom: 0;
    z-index: 1;
  }

  .car3 {
    max-width: 680px !important;
    bottom: 60px;
    left: 0;
    z-index: 2;
  }
  .tire3 {
    max-width: 650px !important;
    bottom: 200px;
    right: 0;
  }
  .info3 {
    bottom: 120px;
    right: 6rem;
    z-index: 2;
  }
  .bgb3 {
    width: 100%;
    height: 960px;
    left: 0;
    bottom: 0;
    z-index: 1;
  }

  .car4 {
    max-width: 850px !important;
    right: 0;
    bottom: 0;
    z-index: 2;
  }
  .tire4 {
    max-width: 650px !important;
    left: 0;
    bottom: 150px;
  }
  .info4 {
    padding-left: 100px;
    bottom: 55px;
    z-index: 2;
  }
  .bgb4 {
    width: 100%;
    height: 960px;
    left: 0;
    bottom: 0;
    z-index: 1;
  }
}
@media (min-width: 1400px) {
  .about-box {
    padding: 0 6rem;
    width: 50%;
  }
  .home-title,
  .border-text {
    font-size: 6rem;
  }
  .car1 {
    max-width: 750px !important;
    bottom: 60px;
    right: calc(50% + 70px);
    z-index: 2;
  }
  .tire1 {
    max-width: 850px !important;
    bottom: 230px;
    left: calc(50% - 10px);
  }
  .info1 {
    bottom: 120px;
    right: 6rem;
    z-index: 2;
  }
  .bgb1 {
    width: 100%;
    height: 330px;
    left: 0;
    bottom: 0;
    z-index: 1;
  }

  .car2 {
    max-width: 950px !important;
    right: 0px;
    bottom: 0px;
    z-index: 2;
  }
  .tire2 {
    max-width: 850px !important;
    margin-left: 100px;
    bottom: 200px;
  }
  .info2 {
    padding-left: 100px;
    bottom: 55px;
    z-index: 2;
  }
  .bgb2 {
    width: 100%;
    height: 960px;
    left: 0;
    bottom: 0;
    z-index: 1;
  }

  .car3 {
    max-width: 880px !important;
    bottom: 60px;
    right: calc(50% - 0px);
    z-index: 2;
  }
  .tire3 {
    max-width: 960px !important;
    bottom: 200px;
    left: calc(50% - 70px);
  }
  .info3 {
    bottom: 120px;
    right: 6rem;
    z-index: 2;
  }
  .bgb3 {
    width: 100%;
    height: 960px;
    left: 0;
    bottom: 0;
    z-index: 1;
  }

  .car4 {
    max-width: 1050px !important;
    right: 50px;
    bottom: 0px;
    z-index: 2;
  }
  .tire4 {
    max-width: 850px !important;
    margin-left: 100px;
    bottom: 150px;
  }
  .info4 {
    padding-left: 100px;
    bottom: 55px;
    z-index: 2;
  }
  .bgb4 {
    width: 100%;
    height: 960px;
    left: 0;
    bottom: 0;
    z-index: 1;
  }
}
</style>
